<template lang="html">
  <div class="address-form form-contain">
    <!-- 地址表格 -->
    <div class="address-addnav">
     <el-button type="primary" @click="addAddress">新增上课地址</el-button>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="address"
          label="上课地址"
          width="800">
        </el-table-column>
        <el-table-column
          prop="date"
          label="操作">
          <template slot-scope='scope1'>
            <el-button @click="handleClick(scope1.row.id, scope1.row.address)" type="text" size="small">编辑</el-button>
            <el-button @click="deletes(scope1.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加地址 -->
    <el-dialog title="新增上课地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="上课地址:" label-width="120px">
          <el-input v-model="form.name" auto-complete="off" placeholder="延安路教学区"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNewAddress">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑地址 -->
    <el-dialog title="编辑上课地址" :visible.sync="dialogFormVisible1">
      <el-form :model="form1">
        <el-form-item label="上课地址:" label-width="120px">
          <el-input v-model="form1.name" auto-complete="off" placeholder="请输入上课地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="editAddress">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getAddress, _addAddress, _deleteAddress} from '@/api/address'
export default {
  data () {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        name: ''
      },
      dialogFormVisible1: false,
      form1: {
        name: '',
        rowId: ''
      }
    }
  },
  methods: {
    addAddress () {
      this.dialogFormVisible = true
    },
    handleClick (rowId, rowName) {
      console.log(rowName)
      this.dialogFormVisible1 = true
      this.form1.rowId = rowId
      this.form1.name = rowName
    },
    editAddress () {
      if (this.form1.name === '') {
        this.$message({
          type: 'warning',
          message: '地址不能为空!'
        })
      } else {
        _addAddress(this.form1.name, this.form1.rowId).then(res => {
          if (res.code === 1) {
            this.$message({
              type: 'success',
              message: '编辑成功!'
            })
            this.dialogFormVisible1 = false
            this.getAddressList()
          } else if (res.code === 2) {
            this.$message({
              type: 'success',
              message: res.message
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    deletes (rowId) {
      this.$confirm('确定删除该上课地址', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _deleteAddress(rowId).then(res => {
          if (res.code === 1) {
            this.getAddressList()
            this.$message({
              type: 'success',
              message: '该上课地址已删除!'
            })
          }
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {

      })
    },
    getAddressList () {
      getAddress().then(res => {
        if (res.code === 1) {
          this.tableData = res.data
        }
      }).catch(err => {
        console.log(err)
      })
    },
    addNewAddress () {
      if (this.form.name === '') {
        this.$message({
          type: 'info',
          message: '地址不能为空!'
        })
      } else {
        _addAddress(this.form.name).then(res => {
          if (res.code === 1) {
            this.$message({
              type: 'success',
              message: '地址已添加!'
            })
            this.dialogFormVisible = false
            this.getAddressList()
          } else {
            this.$message({
              type: 'warning',
              message: res.msg
            })
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  },
  mounted () {
    this.getAddressList()
  }
}
</script>

<style lang="less">
.address-form{
  padding: 32px;
  .address-addnav{
    margin-bottom: 30px;
  }
}
</style>
